<template>
  <div class="post-create">
    <div class="left">
      <h2>发表新攻略</h2>
      <h5>分享你的个人游记，让更多人看到哦！</h5>
      <el-input
        class="post-input"
        v-model="form.title"
        placeholder="请输入标题"
      ></el-input>
      <div class="txt-box">
        <client-only>
          <VueEditor
            v-model="form.content"
            :useCustomImageHandler="true"
            @image-added="imgUpload"
          />
        </client-only>
      </div>
      <el-form class="txt-form" ref="form" :model="form"
        >
        <el-form-item label="选择城市">
          <el-autocomplete
            :fetch-suggestions="querySearch"
            v-model="form.region"
            placeholder="请搜索游玩城市"
          >
          </el-autocomplete>
        </el-form-item>
        <el-form-item class="form-btn">
          <el-button type="primary" @click="onSubmit">发布 </el-button>
          或者
          <el-button @click="save">保存到草稿</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="right">
      <!-- {{$store.state.article.articleList}} -->
      <div class="aside-box" >
        <h4>草稿箱 ({{$store.state.article.articleList.length}})</h4>
        <div class="aside-list" v-for="(item,index) in $store.state.article.articleList" :key="index">
          <div class="title">{{item.title}}</div>
          <div class="aside">
            <span class="aside-time">{{item.region}}</span>
            <span class="aside-icon">
              <i class="el-icon-edit" @click="edit(index)"></i>
              <i class="el-icon-delete" @click="remove"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "",
        region: "",
        content: "",
      },
    };
  },

  methods: {
    edit(index){
      console.log(index);
      this.form.title=this.$store.state.article.articleList[index].title;
      this.form.region=this.$store.state.article.articleList[index].region;
      this.form.content=this.$store.state.article.articleList[index].content;
    },

    remove(){
      this.$store.commit("article/removearticleList");
    },

    save(){
      if (this.form.title == '' && this.form.region == '' && this.form.content == '') {
          this.$message.warning('标题、富文本框、选择城市都不能为空')
          return
      }

      // console.log(1); 
      if (this.$store.state.article.articleList.length <= 4) {
          this.$store.commit("article/setarticle", this.form);
              this.form={
                title: "",
                region: "",
                content: "",
              }
      } else {
         this.$store.commit("article/removearticleList");
          this.$store.commit("article/setarticle", this.form);
              this.form={
                title: "",
                region: "",
                content: "",
              }
      }
    },

    querySearch(queryString, cb) {
      this.$axios({
        url: "/airs/city",
        params: {
        name: queryString,
        },
      }).then((res) => {
        // console.log(res);
        const data = res.data.data.map((item) => {
          return {
            ...item,
            value: item.name,
          };
        });
        cb(data);
      });
    },

    onSubmit() {
      // console.log(this.form);
      this.$axios({
        url: "/posts",
        method: "post",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        data: {
          content: this.form.content,
          title: this.form.title,
          city: this.form.region,
        },
      }).then((res) => {
        if (res.data.message == "新增成功") {
          this.$message.success("提交成功");
          this.$router.replace('/post?city='+this.form.region)
        }
        // console.log(res);
      });
    },

    imgUpload(file, Editor, cursorLocation, resetUploader) {
      // console.log(1);
      const data = new FormData();
      data.append("files", file);
      this.$axios({
        url: "/upload",
        method: "post",
        data: data,
      }).then((res) => {
        // console.log(res);
        const url = this.$axios.defaults.baseURL + res.data[0].url;
        // 2.上传完毕，进入 then 后，将图片作为 img 标签，放入到编辑器的content 内容当中
        Editor.insertEmbed(cursorLocation, "image", url);
        resetUploader();
      });
    },
  },
  
};
</script>

<style lang="less">
.post-create {
  width: 1000px;
  margin: 20px auto;
  display: flex;

  .left {
    width: 700px;

    h2 {
      font-weight: 400;
      margin-bottom: 12px;
    }

    h5 {
      font-weight: 400;
      color: #aab5c5;
      margin-bottom: 12px;
    }

    .txt-box {
      margin-top: 26px;
    }

    .txt-form {
      padding: 30px 50px 15px 0px;

      .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 24px 0 0;
        box-sizing: border-box;
      }
    }
  }

  .right {
    width: 280px;
    padding-left: 52px;

    .aside-box {
      width: 225px;
      border: 1px solid #ddd;

      h4 {
        font-weight: 400;
        color: #666666;
        margin: 10px 0 10px 10px;
      }

      .title {
        margin-left: 10px;
        cursor: pointer;
      }
      .title:hover {
        color: orange;
        text-decoration: underline;
      }

      .aside {
        margin: 0 10px 20px 10px;

        .aside-time {
          margin-right: 30px;
          color: #9dadc8;
        }
        .aside-icon {
          &:hover {
            color: orangered;
          }

          i {
            padding-left: 24px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>